<template>
  <Card title="职称分布" :loading="loading">
    <div ref="chartRef" :style="{ width, height }"></div>
    <!-- <p>选中的部门：{{ selectedDept }}</p> -->
  </Card>
</template>
<script lang="ts" setup>
import { Ref, ref, watch,onMounted,reactive } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '../../../../hooks/web/useECharts';
import { defHttp } from '../../../../utils/http/axios';
const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: '100%',
  },
  height: {
    type: String as PropType<string>,
    default: '200px',
  },
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
  () => props.loading,
  () => {
    if (props.loading) {
      return;
    }
    
  },
  { immediate: true }
);

const datasour=ref();
async function chart(selectedDept){
  if(selectedDept.value===undefined){
   selectedDept.value="";
  }
  const url = `/sys/user/countTech?id=${selectedDept.value}`;
  const res=await defHttp.get({ url });

 setOptions({
      tooltip: {
        trigger: 'item',
      },
      legend: {
        bottom: '-8px',
        left: 'center',
      },
      series: [
        {
          color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
          
          type: 'pie',
          radius: ['30%', '55%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '12',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data:res,
          animationType: 'scale',
          animationEasing: 'exponentialInOut',
          animationDelay: function () {
            return Math.random() * 100;
          },
        },
      ],
    });
}
const selectedDept = ref("");
// 在当前页面加载时执行数据查询
onMounted(async() => {
  chart(selectedDept); // 进入页面第一次渲染，执行数据查询
});
defineExpose({
  chart,
});
</script>
